<template>
	 <view class='me'>
		 <u-toast ref="uToast"></u-toast>
	        <view class='me-header'>
	            <view class='me-header-config'>
	                <image src='../../static/sh.png'></image>
	                <image src='../../static/icon.png'></image> 
	            </view>
	            <view class='me-header-nick' @click='login'>
	                <view class='me-image'>
	                    <image :src="status?userInfo.avatar:'../../static/avatar.png'"></image>
	                    <!-- <image src="../../static/avatar.png"></image> -->
	                </view>
	                <view class='me-login'>
	                    <view class='me-login-text'>
	                        {{ status?userInfo.nickName:'点击登录' }}
	                    </view>
	                    <view class='me-login-msg'>
	                        {{ status?'编辑资料':'登录同步数据，学习更安心' }}
	                    </view>
	                </view>
	            </view>
	            <view class='me-header-vip'>
	                <view class='me-vip'>
	                    <image src="../../static/vip.png" mode=""></image>
	                    <view>VIP会员</view>
	                </view>
	                <view class='me-vip-text'>
	                    <view>开通小鹿线学习平台</view>
	                    <view>VIP会员尽享优质课程</view>
	                </view>
	                <view class='me-vip-button'>
	                    <view>立即开通</view>
	                </view>
	            </view>
	        </view>
	        <view class='me-container'>
	            <view class='me-list-item'>
	                <view>
	                    <view class='list-l' @click="cart">
	                        <u-icon name="photo" size='16'></u-icon>
	                        <text>购物车</text>
	                    </view>
	                    <view class='list-r'>
	                        <u-icon name="arrow-right" size='16'></u-icon>
	                    </view>
	                </view>
	                <view>
	                    <view class='list-l'>
	                        <u-icon name="photo" size='16'></u-icon>
	                        <text>我的订单</text>
	                    </view>
	                    <view class='list-r'>
	                        <u-icon name="arrow-right" size='16'></u-icon>
	                    </view>
	                </view>
	                <view>
	                    <view class='list-l'>
	                        <u-icon name="photo" size='16'></u-icon>
	                        <text>我的余额</text>
	                    </view>
	                    <view class='list-r'>
	                        <u-icon name="arrow-right" size='16'></u-icon>
	                    </view>
	                </view>
	                <view>
	                    <view class='list-l'>
	                        <u-icon name="photo" size='16'></u-icon>
	                        <text>电子兑换码</text>
	                    </view>
	                    <view class='list-r'>
	                        <u-icon name="arrow-right" size='16'></u-icon>
	                    </view>
	                </view>
	            </view>
	            <view class='me-list-about'>
	                <view>
	                    <view class='list-l'>
	                        <u-icon name="photo" size='16'></u-icon>
	                        <text>关于我们</text>
	                    </view>
	                    <view class='list-r'>
	                        <u-icon name="arrow-right" size='16'></u-icon>
	                    </view>
	                </view>
	            </view>
	            <view class='me-list-out' v-if='status' @click="logonOut">
	                <view>退出登录</view>
	            </view>
				
	        </view>
	    </view>
</template>

<script>
import { getInfo,logout } from '../../api/login.js'
import { mapMutations , mapState } from 'vuex'
export default{
    onShow() {
        getInfo().then(res=>{
			if(res.data){
				 this.setUserInfo( res.data );
			}
        })
    },
    computed:{
        ...mapState({
            userInfo:state=>state.user.userInfo,
            status:state=>state.user.status
        })
    },
    methods:{
        ...mapMutations(['setUserInfo','clearUser']),
		cart(){
			uni.navigateTo({
			    url:'/pages/cart/cart'
			})
		},
        login(){
			if(this.status) return;
            uni.navigateTo({
                url:'/pages/login/login'
            })
        },
		//退出登录
		logonOut(){
			logout().then(res=>{
				console.log(res)
				this.clearUser();
				this.$refs.uToast.show({
                    message:'退出登录',
                    type:'success'
                })
			})
		}
    }
}
</script>

<style>
	body{
	    overflow: hidden;
	}
	.me{
	    position: absolute;
	    left:0;
	    right:0;
	    top:0;
	    bottom:0;
	    background: rgba(245,245,245,0.39);
	    overflow: hidden;
	}
	.me-header-config{
	    display: flex;
	    flex-direction: row-reverse;
	    padding:28rpx 0;
	}
	.me-header-config image{
	    width: 42rpx;
	    height: 42rpx;
	}
	.me-header-config image:first-child{
	    margin-left:49rpx;
	    margin-right: 39rpx;
	}
	.me-header-nick{
	    display: flex;
	    padding:0 32rpx;
	}
	.me-image{
	    width: 108rpx;
	    height: 108rpx;
	}
	.me-image image{
	    width: 100%;
	    height: 100%;
		overflow: hidden;
	}
	.me-login{
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    padding-left:27rpx;
	}
	.me-login-text{
	    font-size: 38rpx;
	    font-weight: bold;
	    color: #343234;
	}
	.me-login-msg{
	    font-size: 24rpx;
	    font-weight: 400;
	    color: #919294;
	    padding-top:10rpx;
	}
	.me-header-vip{
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    height: 167rpx;
	    margin: 35rpx 32rpx;
	    background: url('../../static/me-bg.png');
	    background-size:100% 100%;
	}
	.me-vip{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    position: relative;
	}
	.me-vip:after{
	    content: '';
	    position: absolute;
	    right:-25rpx;
	    top:50%;
	    margin-top:-29rpx;
	    width: 4rpx;
	    height: 58rpx;
	    background-color: #fff;
	}
	.me-vip image{
	    width: 79rpx;
	    height: 57rpx;
	}
	.me-vip view{
	    margin-top:7rpx;
	    font-size: 22rpx;
	    font-weight: 400;
	    color: #FFFFFF;
	}
	.me-vip-text view:first-child{
	    font-size: 24rpx;
	    font-weight: 400;
	    color: #FFFFFF;
	}
	.me-vip-text view:last-child{
	    margin-top: 4rpx;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #FFFFFF;
	}
	.me-vip-button{
	    width: 163rpx;
	    height: 58rpx;
	    text-align: center;
	    line-height: 58rpx;
	    background: url('../../static/vip-button.png') no-repeat;
	    background-size:100% 100%;
	}
	.me-vip-button view{
	    font-size: 28rpx;
	    color: #211F37;
	}
	.me-container{
	    margin-top:9rpx;
	    margin:0 32rpx;
	}
	.me-list-item {
	    background: #fff;
	    border-radius: 12rpx;
	}
	.me-list-item > view{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	}
	.me-list-item > view + view{
	    border-top:1rpx solid #ccc;
	}
	.list-l{
	    display: flex;
	    padding:37rpx 35rpx;
	}
	.list-l text{
	    padding-left:24rpx;
	    font-size: 28rpx;
	    color: #333333;
	}
	.list-r{
	    padding:37rpx 20rpx;
	}
	.me-list-about > view{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	.me-list-about{
	    margin-top:17rpx;
	    background: #fff;
	    border-radius: 12rpx;
	}
	.me-list-out{
	    margin-top:26rpx;
	    padding:0 32rpx;
	    line-height: 88rpx;
	    align-items: center;
	    text-align: center;
	    background-color: #fff;
	    border-radius: 12rpx;
	}
	.me-list-out view{
	    font-size: 29rpx;
	    color: #333333;
	}
</style>